<template>
  <div class="unitAccount">
    <div class="breadcrumb">
      <a-button @click="returnBack">返回</a-button>
    </div>
    <div class="title">
      <div class="title_top flexBetween">
        <div>
          <a-icon
            type="pay-circle"
            theme="filled"
            style="color:#3889FF;font-size:22px;font-Weight:600;margin-right:5px"
          />
          <span style="font-size:22px;font-Weight:600">{{this.sheetInfo.title}}</span>
        </div>
        <div>
          <a-dropdown-button @click="handleButtonClick">
            <a-menu slot="overlay" @click="handleMenuClick">
              <a-menu-item key="1">
                <a-icon type="edit" />编辑
              </a-menu-item>
              <a-menu-item key="2">
                <a-icon type="delete" />删除
              </a-menu-item>
            </a-menu>
          </a-dropdown-button>
        </div>
      </div>
      <div style="margin-bottom:10px">{{this.sheetInfo.remarks}}</div>
      <div style="color:#999">
        <span>创建人：</span>
        <span>张三</span>
        <span
          style="margin-left:30px"
        >{{moment(this.sheetInfo.createTime).format('YYYY-MM-DD HH:mm:ss')}}</span>
      </div>
    </div>
    <div class="top flexAround">
      <div class="top_content">
        <div class="top_content_title">工资月份</div>
        <div class="top_content_content">{{this.sheetInfo.wageMonth}}</div>
      </div>
      <div class="top_content">
        <div class="top_content_title">人数统计</div>
        <div class="top_content_content">{{this.sheetInfo.personTotal}}</div>
      </div>
      <div class="top_content">
        <div class="top_content_title">工资统计（元）</div>
        <div class="top_content_content">{{this.sheetInfo.wageTotal}}</div>
      </div>
      <div class="top_content">
        <div class="top_content_title">支付状态</div>
        <div
          class="top_content_content"
          v-if="this.sheetInfo.payFinishTotal!=this.sheetInfo.teamTotal"
        >{{this.sheetInfo.payFinishTotal}}/{{this.sheetInfo.teamTotal}}</div>
        <div class="top_content_content" v-else>已完成</div>
      </div>
    </div>
    <div class="content">
      <div class="content_title">工资支付情况</div>
      <div style="margin-left:40px ;color:#999">进度说明：待创建 >> 工资确认 >> 银行支付 >> 已完成</div>
      <div class="atable">
         <a-spin :spinning="spinning">
        <a-table
          :columns="columns"
          :data-source="data"
          :expandRowByClick="true"
          :defaultExpandedRowKeys="rowstr"
          v-if="this.rowstr.length>0 "
        >
          <a slot="upgradeNum" slot-scope style="color:black">-</a>
          <a slot="creator" slot-scope style="color:black">-</a>
          <a slot="operation" slot-scope style="color:black">-</a>

          <a-table
            slot="expandedRowRender"
            slot-scope="record"
            :columns="innerColumns"
            :data-source="record.childData"
            :pagination="false"
            :showHeader="false"
          >
            <span slot="teamName" slot-scope="text">
              <span style="margin-left:25px">{{text}}</span>
            </span>
            <span slot="personTotal" slot-scope="text">
              <span v-if="text!=0">{{text}}</span>
              <span v-else >-</span>
            </span>
            <span slot="wageTotal" slot-scope="text">
              <span v-if="text!=0">{{text}}</span>
              <span v-else>-</span>
            </span>
            <span slot="reportStatus" slot-scope="reportStatus">
              <!-- <a-badge status="success" />已上报 -->
              <a-tag color="green" v-if="reportStatus=='1'">已上报</a-tag>
              <a-tag color="red" v-if="reportStatus=='0'">未上报</a-tag>
              <!-- <a-tag color="green" v-if="status==''"></a-tag> -->
              <!-- <a-tag color="red" v-else>{{status}}</a-tag> -->
            </span>
            <span slot="progressStatus" slot-scope="progressStatus">
              <!-- {{text}} -->
              <a-badge v-if="progressStatus=='4'" text="已完成" color="green" />

              <a-badge color="#ccc" v-if="progressStatus=='1'" text="待创建" />
              <a-badge color="blue" v-if="progressStatus=='2'" text="工资确认" status="processing" />
              <a-badge color="red" v-if="progressStatus=='0'" text="关闭" />
              <a-badge color="purple" v-if="progressStatus=='3'" text="银行支付" status="processing" />
            </span>
            <span slot="action" slot-scope="text,record" class="table-operation">
              <a v-if="text.progressStatus=='1'" @click="clickEstablish(text,record)">创建</a>
              <a
                v-if="text.progressStatus=='4'||text.progressStatus=='2'||text.progressStatus=='3'"
                @click="clickView(text,record)"
              >查看</a>
              <a
                v-if="text.progressStatus=='1'"
                style="margin-left:10px"
                @click="clickClose(text,record)"
              >关闭</a>
              <a v-if="text.progressStatus=='0'" @click="clickOpen(text,record)">开启</a>
            </span>
          </a-table>
        </a-table>
         </a-spin>
      </div>
      <!-- 分页 -->
      <div class="pagination flexBetween">
        <div>共{{total}} 条记录 第 {{current}} / {{Math.ceil((total/pageSize))}} 页</div>
        <div>
          <a-pagination
            :current="current"
            :page-size-options="pageSizeOptions"
            :total="total"
            show-size-changer
            :pinspector-size="pageSize"
            @showSizeChange="onShowSizeChange"
            @change="pageChange"
            show-quick-jumper
          >
            <template slot="buildOptionText" slot-scope="props">
              <span v-if="props.value !== '40'">{{ props.value }}条/页</span>
              <span v-if="props.value === '40'">全部</span>
            </template>
          </a-pagination>
        </div>
      </div>
    </div>

    <!-- 撤回对话框 -->
    <div class="amodal" v-if="iswithdraw==true">
      <a-modal
        v-model="visible22222"
        :title="amodalTittle"
        @ok="handleOk"
        @cancel="cancelReback"
        :maskClosable="false"
        cancelText="取消"
        okText="确认"
        width="1000px"
        style="position:relative"
      >
        <div>
          <a-form-model
            ref="ruleForm"
            :model="form"
            v-if="visible"
            
          >
          <!-- :label-col="labelCol"
            :wrapper-col="wrapperCol" -->
            <a-form-model-item ref="type" label="通知方式" prop="type">
              <a-input v-model="form.type" :maxLength="30" disabled />
            </a-form-model-item>
            <a-form-model-item ref="people" label="通知人" prop="people">
              <a-input v-model="form.people" :maxLength="30" disabled />
            </a-form-model-item>
            <a-form-model-item ref="reason" label="驳回原因说明：" prop="reason">
              <a-textarea
                :auto-size="{ minRows: 2, maxRows: 4 }"
                v-model="form.reason"
                placeholder="请输入工资单撤回原因（30字以内）"
              />
            </a-form-model-item>
          </a-form-model>
        </div>
      </a-modal>
    </div>
    <!-- 已上报对话框 -->
    <div class="amodal" v-if="iswithdraw==false">
      <a-modal
        v-model="visible"
        :title="amodalTittle"
        @ok="handleOk"
        :maskClosable="false"
        cancelText="取消"
        okText="确认"
        width="1000px"
        style="position:relative"
      >
        <div>
          <div class="modalTitle">
            <span>班组人数：</span>
            <span>{{this.creatForm.personTotal}}</span>
            <span style="margin-left:50px">工资合计：</span>
            <span>{{this.creatForm.wageTotal}}元</span>
            <span style="margin-left:50px">提交人：</span>
            <span>{{this.creatForm.createName}}</span>
            <span
              style="margin-left:10px"
            >{{moment(this.creatForm.createTime).format('YYYY-MM-DD HH:mm:ss')}}</span>
          </div>
          <div class="modalTable">
            <a-table :columns="modalcolumns" :data-source="modaldata">
              <a slot="fullName" slot-scope="text">{{ text }}</a>
              <a slot="signUrl" slot-scope="text">
                <img :src="text" alt width="60px" />
              </a>
            </a-table>
          </div>
          <div>
            <a-button style>导出工资单</a-button>
          </div>
        </div>
        <div style="position:absolute;left:24px;bottom:10px">
          <div class="flexStartCenter">
            <a-button v-if="iswithdraw==false" type="danger" @click="withdraw">撤回</a-button>
            <span v-if="iswithdraw==false" style="color:red;margin-left:15px">工资数据有问题，撤回班组修正</span>
          </div>
        </div>
      </a-modal>
    </div>

    <!-- 未上报对话框 -->
    <div class="amodal">
      <a-modal
        v-model="visible4"
        title="创建班组工资表"
        @ok="handleOk4"
        :maskClosable="false"
        cancelText="取消"
        okText="确认"
        width="1000px"
      >
        <div v-if="manualInput==false" style="text-align:center;margin-bottom:60px">
          <div style="margin-bottom:30px">
            <img src="@/assets/img/nopush.png" alt />
          </div>
          <div style="color:#000;font-size:18px;margin-bottom:10px">班组暂未上报工资表，请联系班组尽快上报</div>
          <div style="margin-bottom:40px;font-size:17px;">
            班组长：张三
            <span style="margin-left:30px">联系电话：18602121232123</span>
          </div>
          <div style="margin-bottom:10px">你也可以通过手动录入方式创建</div>
          <a-button type="primary" @click="manual">手动录入</a-button>
        </div>
        <div v-if="manualInput==true">
          <div class="modalTitle">
            <span>班组人数：</span>
            <span>23</span>
            <span style="margin-left:50px">工资合计：</span>
            <span>{{isNull(getTotal)}}</span>
          </div>
          <div class="modalTable">
            <a-table :columns="modalcolumns2" :data-source="modaldata2">
              <a slot="name" slot-scope="text">{{ text }}</a>
              <span slot="payableWage" slot-scope="text,record">
                <a-input style="width:100px" v-model="record.payableWage"></a-input>
              </span>
            </a-table>
          </div>
          <div>
            <a-button style>导出工资单</a-button>
          </div>
        </div>
      </a-modal>
    </div>

    <!-- 编辑工资单对话框 -->
    <div class="amodal">
      <a-modal
        v-model="visible2"
        title="编辑工资单"
        @ok="handleOk2"
        :maskClosable="false"
        cancelText="取消"
        okText="确认"
       
      >
       <!-- width="645px" -->
        <a-form-model
          ref="ruleForm2"
          :model="form2"
          v-if="visible2"
          
        >
        <!-- :label-col="labelCol"
          :wrapper-col="wrapperCol" -->
          <a-form-model-item ref="time" label="工资月份" prop="time">
            <a-month-picker
              v-model="form2.time"
              type="date"
              style="width: 100%;"
              @change="timeChange"
            />
          </a-form-model-item>
          <a-form-model-item ref="name" label="工资单名称" prop="name" placeholder="请输入工资单名称">
            <a-input v-model="form2.name" :maxLength="30" />
          </a-form-model-item>
          <a-form-model-item ref="explain" label="工资单说明" prop="explain">
            <a-textarea
              v-model="remarks"
              placeholder="请输入说明"
              :auto-size="{ minRows: 3, maxRows: 6 }"
            />
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>

    <!-- 删除对话框 -->
    <div class="amodal">
      <!-- width="645px"  -->
      <a-modal v-model="visible3" title="删除" :maskClosable="false" :footer="null">
        <div
          class="tipWord"
        >正在删除{{this.sheetInfo.title}}，该操作不可逆，一旦操作成功，{{this.sheetInfo.title}}的数据将会删除。请输入下面内容再次确认操作。</div>
        <div style="margin-bottom:20px">请在下发输入框输入“{{this.sheetInfo.title}}”以确认操作</div>
        <div style="margin-bottom:20px">
          <a-input v-model="form3.content" />
        </div>
        <div>
          <a-button style="color:red;width:100%;margin-bottom:30px" @click="checkDelete">确认删除</a-button>
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script>
const columns = [
  { title: '单位名称', dataIndex: 'name', key: 'name', width: 300 },
  { title: '人数统计', dataIndex: 'personTotal', key: 'personTotal', align: 'center', width: 200 },
  { title: '工资统计', dataIndex: 'wageTotal', key: 'wageTotal', align: 'center', width: 200 },
  { title: '班组上报状态', dataIndex: 'upgradeNum', key: 'upgradeNum', scopedSlots: { customRender: 'upgradeNum' }, align: 'center', width: 200 },
  { title: '进度', dataIndex: 'creator', key: 'creator', align: 'center', scopedSlots: { customRender: 'creator' }, width: 200 },

  { title: '操作', key: 'operation', align: 'center', scopedSlots: { customRender: 'operation' }, width: 200 }
]

const innerColumns = [
  { title: 'teamName', dataIndex: 'teamName', key: 'teamName', width: 300, scopedSlots: { customRender: 'teamName' } },
  { title: 'personTotal', dataIndex: 'personTotal', key: 'personTotal', align: 'center', width: 200, scopedSlots: { customRender: 'personTotal' }  },
  { title: 'wageTotal', dataIndex: 'wageTotal', key: 'wageTotal', align: 'center', width: 200, scopedSlots: { customRender: 'wageTotal' }  },
  {
    title: '状态',
    dataIndex: 'reportStatus',
    key: 'reportStatus',
    scopedSlots: { customRender: 'reportStatus' },
    align: 'center',
    width: 200
  },
  {
    title: 'progressStatus',
    dataIndex: 'progressStatus',
    key: 'progressStatus',
    align: 'center',
    width: 200,
    scopedSlots: { customRender: 'progressStatus' }
  },
  {
    title: 'Action',
    key: 'action',
    scopedSlots: { customRender: 'action' },
    align: 'center',
    width: 200
  }
]

const modalcolumns = [
  {
    title: '序号',
    dataIndex: 'order',
    key: 'order',
    align: 'center'
  },
  {
    title: '姓名',
    dataIndex: 'fullName',
    key: 'fullName',
    scopedSlots: { customRender: 'fullName' },
    align: 'center'
  },
  {
    title: '岗位',
    dataIndex: 'postName',
    key: 'postName',
    align: 'center'
  },
  {
    title: '合同工资',
    dataIndex: 'contractWage',
    key: 'contractWage',
    align: 'center'
  },
  {
    title: '出勤天数',
    dataIndex: 'workDays',
    key: 'workDays',
    align: 'center'
  },
  {
    title: '核定工资',
    dataIndex: 'payableWage',
    key: 'payableWage',
    align: 'center'
  },
  {
    title: '工资确认签字',
    dataIndex: 'signUrl',
    key: 'signUrl',
    scopedSlots: { customRender: 'signUrl' },
    align: 'center'
  }
]

const modalcolumns2 = [
  {
    title: '序号',
    dataIndex: 'order',
    key: 'order',
    align: 'center'
  },
  {
    title: '姓名',
    dataIndex: 'fullName',
    key: 'fullName',
    scopedSlots: { customRender: 'fullName' },
    align: 'center'
  },
  {
    title: '岗位',
    dataIndex: 'postName',
    key: 'postName',
    align: 'center'
  },
  {
    title: '合同工资',
    dataIndex: 'contractWage',
    key: 'contractWage',
    align: 'center'
  },
  {
    title: '出勤天数',
    dataIndex: 'workDays',
    key: 'workDays',
    align: 'center'
  },
  {
    title: '核定工资',
    dataIndex: 'payableWage',
    key: 'payableWage',
    scopedSlots: { customRender: 'payableWage' },
    align: 'center'
  }
]

import moment from 'moment'
import {
  wagePayGet,
  wagePayQuery,
  teamWageSheetQuery,
  personWageQueryBySource,
  wagePayDelete,
  wagePayEdit,
  wagePayCheck,
  withdrawApi,
  wagePayClose
} from '@/api/wageDetail'
export default {
  data() {
    return {
      spinning:true,
      sheetId: '',
      data: [],
      columns,
      innerColumns,
      current: 1,
      pageSize: 10,
      total: 1,
      pageSizeOptions: ['5', '10', '20', '30', '40'],
      visible: false,
      amodalTittle: '创建班组工资表',
      modalcolumns,
      modaldata: [],
      modalcolumns2,
      modaldata2: [],
      iswithdraw: false,
      rowstr: [],
      //   撤回表单
      form: {
        type: '短信通知',
        people: '张三 123291291921',
        reason: ''
      },
      reportId: '',
      visible2: false,
      visible3: false,
      visible4: false,
      //   编辑表单
      form2: {
        time: moment('2021-02-02'),
        name: '【2020-02】劳务工资'
      },
      visible22222: false,
      remarks: '',
      //删除表单
      form3: { content: '' },
      labelCol: { span: 7 },
      wrapperCol: { span: 12 },
      manualInput: false,
      manualInfo: {},
      modaltotal: '',
      ischeck: '',
      sheetInfo: {
        payFinishTotal: 0,
        personTotal: 0,
        projectId: '',
        remarks: '56',
        teamTotal: 31,
        title: '【2021-11】劳务工资',
        wageMonth: '2021-11',
        wageTotal: 0.2
      },
      creatForm: {
        personTotal: '',
        wageTotal: '',
        createName: '',
        createTime: ''
      },
      openFlag: true
    }
  },
  created() {
    this.getKey()
    //  this.getTable()
  },
  methods: {
    moment,
    getKey() {
      let sheetId = sessionStorage.getItem('sheedId')
      let data = { sheetId: '', orgId: '6f8c6758d9754e2b9eb2d74bcc312512', page: this.current, size: this.pageSize }
      data.sheetId = sheetId
      this.rowstr = []
      wagePayQuery(data).then((res) => {
        this.sheetInfo = res.data.data.sheetInfo
        res.data.data.pageInfo.list.forEach((item, index) => {
          this.rowstr.push(item.id)
        })
      })
    },
    getTable() {
      let sheetId = sessionStorage.getItem('sheedId')
      let data = { sheetId: '', orgId: '6f8c6758d9754e2b9eb2d74bcc312512', page: this.current, size: this.pageSize }
      data.sheetId = sheetId
      this.data = []
    
      wagePayQuery(data).then((res) => {
        this.sheetInfo = res.data.data.sheetInfo
        res.data.data.pageInfo.list.forEach((item, index) => {
          item.key = item.id
          let _index = index
          item['childData'] = []
          this.data.push(item)
         
          if (item.wagePayVOList != null) {
            item.wagePayVOList.forEach((data, index) => {
              data.key = data.id
              this.data[_index].childData.push(data)
            })
          } else {
            this.data[_index].childData = []
          }
        })
        this.getKey()
        this.spinning=false
      })
     
    },
    returnBack() {
      this.$router.push({ path: '/migrantWages/wagePaymentRecord' })
    },
    timeChange(val) {
      let time = moment(val).format('YYYY-MM')
      this.form2.name = '【' + time + '】' + '劳务工资'
    },
    handleButtonClick(e) {},
    handleMenuClick(e) {
      if (e.key == 1) {
        this.form2.time = moment(this.sheetInfo.wageMonth)
        this.form2.name = this.sheetInfo.title
        this.remarks = this.sheetInfo.remarks
        this.visible2 = true
      }
      if (e.key == 2) {
        this.visible3 = true
      }
      //   console.log('删除', e)
    },

    onShowSizeChange(current, pageSize) {
      // console.log(current, pageSize)
      this.current = 1
      this.pageSize = pageSize
      this.getTable()
    },
    pageChange(current, pageSize) {
      this.current = current
      this.pageSize = pageSize
      this.getTable()
    },
    handleOk() {
      this.visible = false
      if (this.amodalTittle == '创建班组工资表') {
        let data = {
          orgId: '6f8c6758d9754e2b9eb2d74bcc312512',
          sheetId: this.sheetId,
          source: '1',
          teamId: this.manualInfo.teamId,
          teamName: this.manualInfo.teamName,
          wageMonth: this.manualInfo.wageMonth,
          wagePayId: this.manualInfo.id
        }
        wagePayCheck(data).then((res) => {
          this.$message.success('创建成功')
          this.getTable()
        })
      }
      // 撤回接口
      if (this.amodalTittle == '撤回工资单') {
        // console.log(111111111)
        let data = {
          cellphone: '',
          explain: this.form.reason,
          fullName: '',
          id: this.reportId,
          wagePayId: this.manualInfo.id
        }
        withdrawApi(data).then((res) => {
          this.$message.success('撤回成功')
          this.getTable()
          this.visible = false
          this.visible22222 = false
        })
      }
    },
    cancelReback() {
      if (this.amodalTittle == '撤回工资单') {
        this.iswithdraw = false
        this.amodalTittle == '创建班组工资表'
        this.visible22222 = false
        this.visible = true
      }
    },
    handleOk2() {
      let data = {
        id: this.sheetId,
        title: this.form2.name,
        remarks: this.remarks
      }
      wagePayEdit(data).then((res) => {
        this.$message.success('编辑成功')
        this.getTable()
      })
      this.visible2 = false
    },
    handleOk4() {
      this.visible4 = false
      // console.log(this.modaldata2)

      let data = {
        orgId: sessionStorage.getItem('orgId'),
        sheetId: this.sheetId,
        source: '2',
        teamId: this.manualInfo.teamId,
        teamName: this.manualInfo.teamName,
        wageMonth: this.manualInfo.wageMonth,
        wagePayId: this.manualInfo.id,
        wageConfirmList: []
      }
      this.modaldata2.forEach((item) => {
        let wage = {
          payableWage: item.payableWage,
          personId: item.orgPersonId
        }
        data.wageConfirmList.push(wage)
      })
      wagePayCheck(data).then((res) => {
        this.$message.success('创建成功')
        this.getTable()
      })
    },
    clickEstablish(text, record) {
      // console.log(text)
      this.manualInfo = text
      if (text.reportStatus == '1') {
        this.amodalTittle = '创建班组工资表'
        this.getWage(1)
        this.iswithdraw = false
        this.visible = true
        // this.visible22222 = true
        // console.log(2);
      } else {
        // console.log(1);

        this.manualInput = false
        this.visible4 = true
      }
    },
    clickView(text, record) {
      this.$router.push({ path: '/migrantWages/teamPayroll', query: text })
    },
    clickClose(text, record) {
      // console.log(text, record)
      this.isClose(0, text.key)
      // this.innerData[record.key].operation = '查看'
    },
    clickOpen(text, record) {
      // console.log(text, record)
      this.isClose(1, text.key)
    },
    manual() {
      // console.log(this.manualInfo);
      this.getWage(2)
      this.manualInput = true
    },
    //获取工资
    getWage(value) {
      let data = {
        orgPersonId: '',
        page: this.current,
        size: this.pageSize,
        source: value,
        teamId: this.manualInfo.teamId,
        wageMonth: this.manualInfo.wageMonth
      }
      // console.log(this.manualInfo);
      this.modaldata = []
      this.modaldata2 = []
      personWageQueryBySource(data).then((res) => {
        this.creatForm.personTotal = res.data.data.personTotal
        this.creatForm.wageTotal = res.data.data.wageTotal
        this.creatForm.createName = res.data.data.createName
        this.creatForm.createTime = res.data.data.createTime

        res.data.data.personWageVOList.forEach((item, index) => {
          item.key = item.orgPersonId
          item.order = index + 1
          if (value == 1) {
            this.modaldata.push(item)
            this.reportId = res.data.data.reportId
            // console.log()
          } else {
            this.modaldata2.push(item)
          }
        })
      })
    },
    withdraw() {
      this.amodalTittle = '撤回工资单'
      this.iswithdraw = true
      this.visible22222 = true
    },
    checkDelete() {
      console.log(this.sheetInfo.wageMonth)

      if (this.form3.content == this.sheetInfo.title) {
        let data = {
          orgId: '6f8c6758d9754e2b9eb2d74bcc312512',
          id: this.sheetId,
          wageMonth: this.sheetInfo.wageMonth
        }
        wagePayDelete(data).then((res) => {
          this.$message.error('删除成功')
          this.$router.push({ path: '/migrantWages/wagePaymentRecord' })
        })
        this.visible3 = false
      } else {
        this.$message.error('内容输入错误')
      }
    },
    isNull(val) {
      if (isNaN(val) == true) {
        return 0
      } else {
        return val
      }
    },
    isClose(val, id) {
      let data = {
        progressStatus: val,
        id,
        sheetId: this.sheetId
      }
      wagePayClose(data).then((res) => {
        if (val == 0) {
          this.$message.destroy()
          this.$message.success('关闭成功')
        } else {
          this.$message.destroy()
          this.$message.success('打开成功')
        }

        this.getTable()
      })
    },
    keyChange(selectedRowKeys, selectedRows) {
      console.log(selectedRowKeys, selectedRows)
    }
  },
  mounted() {
    this.sheetId = sessionStorage.getItem('sheedId')
    this.getTable()
  },
  computed: {
    getTotal: function() {
      let total = 0
      let data = this.modaldata2
      for (let item of data) {
        // console.log(item.payableWage);

        if (isNaN(item.payableWage) || item.payableWage == null) {
          continue
        }
        total += parseFloat(item.payableWage)
      }
      return total
    }
  }
}
</script>

<style scoped>
.breadcrumb {
  padding: 5px;
  /* background: #fff; */
  margin-bottom: 10px;
  padding-left: 0;
}
.top {
  text-align: center;
  color: #555;
  margin-bottom: 20px;
  background: #fff;
  padding: 20px 30px;
}
.top_content {
  flex: 1;
  border-right: 1px solid #ccc;
}
.top_content:last-of-type {
  border: none;
}
.top_content_content {
  color: #000;
  font-size: 30px;
  /* font-weight: 600; */
}
.center_title {
  font-size: 16px;
  color: #000;
  font-weight: 600;
}
::v-deep .ant-btn-group > .ant-btn:first-child:not(:last-child) {
  display: none;
}
.title {
  background: #fff;
  padding: 15px 30px;
  margin-bottom: 20px;
  color: #000;
}
.title_top {
  margin-bottom: 10px;
}
.flexBetween {
  align-items: center;
}
.content {
  background: #fff;
  color: #000;
  padding-bottom: 10px;
}
.content_title {
  font-size: 18px;
  /* font-weight: 600; */
  color: #000;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  border-bottom: 1px solid #eee;
  padding: 10px 30px;
  margin-bottom: 20px;
}
.atable {
  padding: 10px 30px;
}
.pagination {
  padding: 15px 30px;
}
.modalTitle,
.modalTable {
  margin-bottom: 15px;
}
.tipWord {
  border: 1px solid rgba(255, 229, 143, 1);
  border-radius: 4px;
  background: rgba(255, 251, 230, 1);
  padding: 16px 20px;
  margin-bottom: 30px;
}
::v-deep .ant-tag {
  border: none;
  border-radius: 2px;
}
</style>